<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery中on实现事件委派和给动态元素绑定事件</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div class="box"> 
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
        </ul>
    </div>
    <script>
        // on() 方法实现事件委派操作。事件委派的定义就是，把原来加给元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
        // on() 方法可以给动态生成的元素绑定事件。动态创建的元素，click() 方法是没有办法进行绑定的。
        $(function(){
            // 一、on() 实现事件委托（委派）
            $('ul').on('click','li',function(){
                // on() 实现事件委托的语法：$('父元素').on('事件名称','子元素',fn);
                // 父元素 ul上绑定了 click 事件，点击子元素 li 时触发事件，执行回调函数 fn。回调函数 fn 中 this 指向被点击的子元素 li。
                alert('on() 方法实现事件委托。');
            })
            // 二、on() 实现给动态元素绑定事件
            //创建一个新标签
            var li = $("<ol><li>我是动态生成的元素。</li></ol>");
            // 将新标签添加到 dom上。
            $('div').append(li);
            // 给动态生成的元素绑定事件。
            $('ol').on('click','li',function(){
                alert(11);
            })
        })

    </script>
</body>
</html>
